<template>
    <div class="area-content-pro">
        <div id="main_right_A"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal, "11111111");
                //新旧值不同
                setTimeout(() => {
                    this.area()
                }, 1000);
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
        area() {
            var chartDom = document.getElementById('main_right_A');
            console.log(chartDom);
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    itemHeight: '9',
                    textStyle: {
                        color: "#fff"
                    },
                    top: '3%',
                    // icon: 'circle',
                    right: '3%',
                    data: ['轻烃', '液化气', '乙烷']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category', 
                    axisLabel: {
                        // interval: 0,
                        // rotate: 40,
                    },
                },
                yAxis: {},
                dataset: {
                    // source: [['product', '轻烃', '液化气', '乙烷'], [2021,2,3,4],[4,5,6],[7,8,9]]
                    source: [['product', '轻烃', '液化气', '乙烷'], ...this.data]
                },
                series: [{
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#D1FAFF'
                        }
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#fac017' },
                            { offset: 0.5, color: '#fac017' },
                            { offset: 1, color: '#fac017' }
                        ])
                    },
                    // emphasis: {
                    //     itemStyle: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //             { offset: 0, color: '#D1FAFF' },
                    //             { offset: 0.5, color: '#35CBE6' },
                    //             { offset: 1, color: '#1A72D5' }
                    //         ])
                    //     }
                    // },
                }, {
                    type: 'bar', itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#D1FAFF ' },
                            { offset: 0.5, color: '#35E678' },
                            { offset: 1, color: '#61CB86' }
                        ])
                    },
                    // emphasis: {
                    //     itemStyle: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //             { offset: 0, color: '#D1FAFF ' },
                    //             { offset: 0.5, color: '#35E678' },
                    //             { offset: 1, color: '#61CB86' }
                    //         ])
                    //     }
                    // },
                }, {
                    type: 'bar', itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#FDF7D3' },
                            { offset: 0.5, color: '#107AF3' },
                            { offset: 1, color: '#0F79F2' }
                        ])
                    },
                    // emphasis: {
                    //     itemStyle: {
                    //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //             { offset: 0, color: '#FDF7D3' },
                    //             { offset: 0.5, color: '#107AF3' },
                    //             { offset: 1, color: '#0F79F2' }
                    //         ])
                    //     }
                    // },
                }]
            };
            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="scss" scoped>
.area-content-pro {

    #main_right_A {
        width: 363px;
        height: 265px;
    }
}
</style>